<template>
  <div class="container-choice">
    <el-card>
      <p>说明: 目前支持学科和关键字条件筛选</p>
      <el-row type="flex" justify="end" align="center" style="margin-bottom: 20px">
        <el-button type="success" @click="$router.push({ name: 'questions-new' })">
          <i class="el-icon-edit" style="color: white"></i>
          新增试题
        </el-button>
      </el-row>
      <question-add @choice="choice"></question-add>
      <el-tabs v-model="activeName" type="card" @tab-click="checkAll">
        <el-tab-pane v-for="(item, index) in list" :key="index" :name="item.name">
          <span slot="label">{{ item.label }}</span>
        </el-tab-pane>
      </el-tabs>
      <el-alert :title="`数据一共${counts}条`" type="info" show-icon :closable="false"> </el-alert>
      <question-t :isList="false" :tableData="tableData"></question-t>
      <el-row type="flex" justify="end" align="center" style="margin-top: 20px">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[5, 10, 20, 50]"
          :page-size="100"
          layout=" prev, pager, next, sizes,jumper"
          :total="counts"
        >
        </el-pagination>
      </el-row>
    </el-card>
  </div>
</template>

<script>
import QuestionAdd from '../components/questions-add.vue'
import { choice } from '@/api/hmmm/questions'
import QuestionT from '../components/questions-t.vue'
export default {
  components: {
    QuestionT,
    QuestionAdd
  },
  created () {
    this.getChoiceList({ page: this.page, pagesize: this.pagesize })
  },
  data () {
    return {
      tableData: [],
      activeName: 'first',
      currentPage: 1,
      counts: 0,
      page: 1,
      pagesize: 5,
      chkState: 0,
      list: [
        { name: 'first', label: '全部' },
        { name: 'second', label: '待审核' },
        { name: 'three', label: '已审核' },
        { name: 'four', label: '已拒绝' }
      ]
    }
  },
  methods: {
    async getChoiceList (obj) {
      const { data } = await choice(obj)
      // console.log(data)
      this.tableData = data.items // 数据
      this.counts = data.counts
    },
    // 获取所有
    async checkAll () {
      if (this.activeName === 'first') {
        this.getChoiceList({ page: this.page, pagesize: this.pagesize })
      }
      if (this.activeName === 'second') {
        this.chkState = 0
        this.getChoiceList({ page: this.page, pagesize: this.pagesize, chkState: this.chkState })
      }
      if (this.activeName === 'three') {
        this.chkState = 1
        this.getChoiceList({ page: this.page, pagesize: this.pagesize, chkState: this.chkState })
      }
      if (this.activeName === 'four') {
        this.chkState = 2
        this.getChoiceList({ page: this.page, pagesize: this.pagesize, chkState: this.chkState })
      }
    },
    // 搜索
    async choice (keyword, subjectID) {
      if (keyword !== '' && subjectID !== '') {
        this.getChoiceList({ keyword, subjectID, page: this.page, pagesize: this.pagesize })
      }
      if (keyword !== '') {
        this.getChoiceList({ page: this.page, pagesize: this.pagesize, keyword })
      } else if (subjectID !== '') {
        this.getChoiceList({ page: this.page, pagesize: this.pagesize, subjectID })
      } else {
        this.getChoiceList({ page: this.page, pagesize: this.pages })
      }
    },
    // 切换
    handleCurrentChange (page) {
      this.page = page
      this.getChoiceList({ page: this.page, pagesize: this.pagesize })
    },
    handleSizeChange (pagesize) {
      this.pagesize = pagesize
      this.getChoiceList({ page: this.page, pagesize: this.pagesize })
    }
  }
}
</script>

<style scoped lang='scss'>
.container-choice {
  padding: 15px 10px;
  p {
    font-size: 14px;
    color: #ffcee2;
  }
}
</style>
